<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts - Generate By @isea533/abel533</title>
    <style>*{ margin:0} html,body{ height:100%} .wrapper{ min-height:100%; height:auto !important; height:100%; margin:0 auto -155px} .footer,.push{ height:155px} table.gridtable{ font-family:verdana,arial,sans-serif; font-size:11px; color:#333; border-width:1px; border-color:#666; border-collapse:collapse; margin:5px auto} table.gridtable th{ border-width:1px; padding:8px; border-style:solid; border-color:#666; background-color:#dedede} table.gridtable td{ border-width:1px; padding:8px; border-style:solid; border-color:#666; background-color:#fff} .middle{ text-align:center; margin:0 auto; width:90%; height:auto} .info{ font-size:12px; text-align:center; line-height:20px; padding:40px} .info a{ margin:0 10px; text-decoration:none; color:green}</style>
</head>
<body>
<div class="wrapper">
    <div class="middle">
        <h1 style="padding: 70px 0 20px;">ECharts效果</h1>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
    </div>
    <div class="push"></div>
</div>
<div class="footer">
    <div class="info">
        ECharts - JAVA开发工具：
        <a href="http://git.oschina.net/free/ECharts" target="_blank">项目地址</a>
        <a href="http://echarts.baidu.com" target="_blank">ECharts地址</a>
        <br/>
        作者：<a href="http://blog.csdn.net/isea533" style="margin: 0;" target="_blank">@Isea533/abel533</a>
    </div>
</div>
</body>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));

var option = {"calculable": true,"title": {"text": "漏斗图","subtext": "纯属虚构"},"toolbox": {"feature": {"mark": {"show": true,"title": {"markUndo": "删除辅助线","markClear": "清空辅助线","mark": "辅助线开关"},"lineStyle": {"color": "#1e90ff","type": "dashed","width": 2}},"dataView": {"show": true,"title": "数据视图","readOnly": false,"lang": ["数据视图","关闭","刷新"]},"restore": {"show": true,"title": "还原"},"saveAsImage": {"show": true,"title": "保存为图片","type": "png","lang": ["点击保存"]}},"show": true},"tooltip": {"trigger": "item","formatter": "{a} <br/>{b} : {c}%"},"legend": {"data": ["展现","点击","访问","咨询","订单"]},"series": [{"x": "10%","y": 60,"min": 0,"max": 100,"minSize": "0%","maxSize": "100%","sort": "descending","gap": 10,"name": "漏斗图","type": "funnel","itemStyle": {"normal": {"label": {"show": true,"position": "inside"},"labelLine": {"show": false,"length": 10,"lineStyle": {"type": "solid","width": 1}},"borderColor": "#fff","borderWidth": 1},"emphasis": {"label": {"show": true,"formatter": "{b}:{c}%","textStyle": {"fontSize": 20}},"labelLine": {"show": true},"borderColor": "red","borderWidth": 5}},"width": "80%","data": [{"name": "访问","value": 60},{"name": "咨询","value": 40},{"name": "订单","value": 20},{"name": "点击","value": 80},{"name": "展现","value": 100}]}]};

// 为echarts对象加载数据
myChart.setOption(option);
</script>
</html>
